<template>
    <div class="goods-container">
        <div class="goods-item" @click="goDetail(item.id)" v-for="item in goodsList" :key="item.id">
            <img :src="item.img_url" alt="">
            <h5>{{item.title}}</h5>
            <p>
                <span class="newval">￥{{item.sell_price}}</span>
                <span class="oldval">￥{{item.market_price}}</span>
            </p>
            <div>
                <span>热卖中</span>
                <span>剩{{item.stock_quantity}}件</span>
            </div>
        </div>
        <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageIndex:1,
            goodsList:[]    
        }
    },
    created() {
        this.getGoodsList()
    },
    methods: {
        // 获取商品列表
        getGoodsList(){
            this.$http.get('api/getgoods?pageindex=' + this.pageIndex).then(result=>{
                if(result.body.status == 0){
                    this.goodsList = this.goodsList.concat(result.body.message);
                }
            })
        },
        //加载更多
        getMore(){
            this.pageIndex++;
            this.getGoodsList();
        },
        goDetail(id){
            this.$router.push('/home/goodsinfo/' + id)
        }
    },
}
</script>

<style lang="scss" scope>
    .goods-container{
        display: flex;
        justify-content: space-between;
        flex-wrap:wrap;
        padding:7px;
        .goods-item{
            width:49%;        
            border:1px solid #ccc;
            box-shadow: 0 0 8px #ccc;
            padding:2px;
            margin:3px 0;
            min-height:293px;
            h5{
                font-size:14px;
                font-weight:bold;
                color:#000;
                margin:5px 0;
            }
            img{
                width:100%;
            }
            p{
                padding:10px 0 0 0;
                margin:0 0 0 0;
                span{
                    font-size:16px;
                }
                :first-child{
                    color:red;
                }
                :last-child{
                    margin-left:10px;
                    text-decoration: line-through;
                }
            }
            div{
                display: flex;
                justify-content: space-between;
                padding:10px 5px 0 5px;
                span{
                    font-size:13px;
                    color:#8f8f94;
                }     
            }
        }
    }
</style>